//引入数据
import { useState, forwardRef, useImperativeHandle } from 'react';
//引入对应的组件
import { Button, Drawer, Form, Input, Select, Radio, Switch, message } from 'antd';
//引入添加 或者编辑的接口 ->addOrEdit   
import { addOrEdit, menuinfo } from "../../request/api";


//按钮的样式
const diaBtn = {
    margin: '10px',
    float: "right"
};
//单选框的样式
const ccc = {
    display: "none"
};
//菜单图标的数组
const iconArr = ['WindowsFilled', 'AppstoreFilled', 'HeartFilled', 'MessageFilled', 'EditOutlined', 'UnorderedListOutlined', 'StarOutlined', 'ScheduleOutlined', 'FireOutlined', 'FileJpgOutlined', 'ContactsOutlined', 'WechatOutlined'];

const { Option } = Select;

function Dialog(prop, ref) {
    let [id, setid] = useState(0);
    useImperativeHandle(ref, () => ({
        //表单回显数据
        lookup: (id) => {
            menuinfo({ id }).then(res => {
                setid(id);
                //设置Switch属性
                if (res.list.status == 1) {
                    setSwitch(true);
                } else {
                    setSwitch(false);
                };

                //设置单选框属性
                if (res.list.type == 1) {
                    setValue(1)
                } else {
                    setValue(2)
                };
                //赋值input框
                form.setFieldsValue({ ...res.list });
            });
        }
    }));
    //这是单选框的数值
    let [value, setValue] = useState(0);
    //这是Switch的数值
    let [switchValue, setSwitch] = useState(false);
    //创建form实例
    const [form] = Form.useForm();




    //点击确认事件
    const submit = async (val) => {
        if (id != 0) val.id = id;
        //判断是添加 还是编辑
        let url = prop.isAdd ? "/menuadd" : '/menuedit';
        val.type = value;
        //这是修改status为1 或 2
        if (!val.status) {
            val.status = 2
        } else {
            val.status = 1
        };
        //修改 url  icon
        if (!val.url) val.url = "";
        if (!val.icon) val.icon = "";
        //调用接口
        let res = await addOrEdit(url, val);
        //判断是否添加成功
        if (res.code == 200) {
            //成功提示
            message.success(res.msg);
            //重新调用数据
            prop.getData();
            //关闭Dialog
            cancel();
        } else {
            //失败提示
            message.error(res.msg);
        }
    };
    //点击单选框 获取数据
    const changeRadio = (e) => {
        setValue(e);
    };
    //点击下拉选择器 事件 修改单选框
    const changeSelect = (val) => {
        if (val == 0) {
            changeRadio(1);
        } else {
            changeRadio(2);
        }
    };
    //switch开关事件
    const changeSwitch = val => {
        setSwitch(val);
    };
    //表单取消事件
    const cancel = () => {
        prop.getShow(false);
        //清空表单
        form.resetFields();
        //清空单选框
        setValue(0);
        //清空Switch
        setSwitch(false);
    };




    return (<div id="dialog">
        <Drawer
            title={prop.isAdd ? '添加菜单' : '编辑菜单'}
            width={660}
            bodyStyle={{
                paddingBottom: 80,
            }}
            className="Drawer"
            open={prop.isShow}
            onClose={cancel}
        >
            <Form labelCol={{
                span: 3,
            }}
                onFinish={submit}
                form={form}
            >
                {/* 菜单名称 */}
                <Form.Item
                    label="菜单名称"
                    name="title"
                    rules={[
                        {
                            required: true,
                            message: '请输入菜单名称',
                        },
                    ]}
                >
                    <Input placeholder="请输入菜单名称" />
                </Form.Item>

                {/* 上级菜单 */}
                <Form.Item
                    name="pid"
                    label="上级菜单"
                    rules={[
                        {
                            required: true,
                            message: '请选择上级菜单',
                        },
                    ]}
                >
                    <Select
                        style={{
                            width: 450,
                        }}
                        placeholder="请选择上级菜单"
                        onSelect={changeSelect}
                    >
                        <Option value={0}>顶级菜单</Option>
                        {
                            prop.menuData.map(item => {
                                return <Option key={item.id} value={item.id}>{item.title}</Option>
                            })
                        }
                    </Select>
                </Form.Item>


                {/* 菜单类型 */}
                <Form.Item name="type" label="菜单类型" >
                    <span style={ccc}>{value}</span>
                    <Radio.Group onChange={changeRadio} disabled value={value}>
                        <Radio value={1}>目录</Radio>
                        <Radio value={2}>菜单</Radio>
                    </Radio.Group>
                </Form.Item>

                {/* 菜单地址  或者 菜单图标 */}
                {
                    value == 0 ? '' : (value == 1 ? <Form.Item name="icon" label="菜单图标">
                        <Select
                            style={{
                                width: 450,
                            }}
                            placeholder="请选择上级菜单"
                        >
                            {
                                iconArr.map(Item => {
                                    return <Option key={Item}>{Item}</Option>
                                })
                            }

                        </Select>
                    </Form.Item> : <Form.Item name="url" label="菜单地址">
                        <Input placeholder="请输入菜单地址" />
                    </Form.Item>)
                }

                {/* 状态 */}
                <Form.Item
                    label="状态"
                    name="status"
                >
                    <Switch defaultChecked onChange={changeSwitch} checked={switchValue} />
                </Form.Item>


                {/* 按钮选项 */}
                <Form.Item>
                    <Button type="primary" style={diaBtn} htmlType='submit'>
                        确认
                    </Button>
                    <Button type="default" style={diaBtn} htmlType='button' onClick={cancel}>
                        取消
                    </Button>
                </Form.Item>

            </Form>
        </Drawer>
    </div>)


}

export default forwardRef(Dialog);
